import React from 'react';
import './-page.scss';
import {observable, observer, action} from 'mobx.collection';
import responsiveHOC from "react-lines-ellipsis/lib/responsiveHOC";
// import LinesEllipsis from "react-lines-ellipsis";
import LinesEllipsis from "react-lines-ellipsis/lib/html";
import {unsafeHTMLReplace} from 'auxiliaries/extends/format';

const ResponsiveEllipsis = responsiveHOC()(LinesEllipsis);

@observer
class InfoEllipsisLine extends React.Component {
    @observable displayList;
    @observable showButton = true;

    #ResponsiveEllipsisElement;
    #ResponsiveElement;

    @action
    onShow() {
        if (this.showButton) {
            this.displayList = !this.displayList;
        }
    }

    @action
    onReflow(props) {
        let {
            clamped
        } = props;
        this.showButton = clamped;
    }

    render() {
        let {
            text,
            ellipsis,
            maxLine,
            className
        } = this.props;

        return (
            <div className={"--info-ellipsis-line" + (className ? ` ${className}` : '')}
                 ref={_ => this.#ResponsiveElement = _}>
                {
                    !this.displayList ?
                        (
                            <ResponsiveEllipsis ref={_ => this.#ResponsiveEllipsisElement = _}
                                                onClick={() => this.onShow()}
                                                unsafeHTML={text}
                                                maxLine={maxLine || '3'}
                                                ellipsis={ellipsis || '...'}
                                                onReflow={_ => this.onReflow(_)}
                                // trimRight
                                                basedOn='letters'/>
                        )
                        : <article dangerouslySetInnerHTML={{__html: text}}/>
                }
                <div className={
                    "display-show right-ico"
                    + (!this.displayList ? '' : ' spread')
                    + (!this.showButton ? ' --none' : '')
                }
                     onClick={() => this.onShow()}>
                    <span>{!this.displayList ? '展开' : '收起'}</span>
                </div>
            </div>
        );
    }
}

export default InfoEllipsisLine;